<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ConfigProvider } from 'ant-design-vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 监听路由变化显示进度条
watch(
  () => route.path,
  () => {
    NProgress.start()
    setTimeout(() => {
      NProgress.done()
    }, 300)
  },
)
</script>

<template>
  <ConfigProvider>
    <RouterView />
  </ConfigProvider>
</template>

<style>
#app {
  width: 100%;
  height: 100vh;
}

/* NProgress样式覆盖 */
#nprogress .bar {
  background: #20ff1849;
}
</style>
